<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <title>网站配置 - {$SystemName}</title>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/css/style.min.css">
  <link rel="stylesheet" type="text/css" href="/js/jquery-confirm/jquery-confirm.min.css">
</head>

<body>
  <div class="container-fluid">

    <div class="row">

      <div class="col-lg-12">
        <div class="card">
          <header class="card-header">
            <div class="card-title">网站配置</div>
          </header>
          <div class="card-body">

            <ul class="nav nav-tabs">
              <li class="nav-item">
                <button class="nav-link active" id="basic-config" data-bs-toggle="tab" data-bs-target="#config"
                  type="button">基本</button>
              </li>
              <li class="nav-item">
                <button class="nav-link" id="basic-sys" data-bs-toggle="tab" data-bs-target="#sys"
                  type="button">系统</button>
              </li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane fade show active" id="config" aria-labelledby="basic-config">

                <div class="mb-3">
                  <label for="SystemName" class="form-label">网站标题</label>
                  <input class="form-control" type="text" id="SystemName" name="SystemName" value="{$SystemName}"
                    placeholder="请输入站点标题">
                </div>
                <div class="mb-3">
                  <label for="SiteKeywords" class="form-label">站点关键词</label>
                  <input class="form-control" type="text" id="SiteKeywords" name="SiteKeywords" value="{$SiteKeywords}"
                    placeholder="请输入站点关键词">
                  <small class="form-text">网站搜索引擎关键字</small>
                </div>
                <div class="mb-3">
                  <label for="SiteDescription" class="form-label">站点描述</label>
                  <textarea class="form-control" id="SiteDescription" rows="5" name="SiteDescription"
                    placeholder="请输入站点描述">{$SiteDescription}</textarea>
                  <small class="form-text">网站描述，有利于搜索引擎抓取相关信息</small>
                </div>
                <div class="mb-3">
                  <label for="icp" class="form-label">备案信息</label>
                  <input class="form-control" type="text" id="icp" name="icp" value="{$icp}" placeholder="请输入备案信息">
                </div>
                <div>
                  <button type="submit" class="btn btn-primary me-1">确 定</button>
                </div>

              </div>
              <div class="tab-pane fade" id="sys" aria-labelledby="basic-sys">
                <div class="mb-3">
                  <label for="RandomSalt" class="form-label">随机盐</label>
                  <textarea class="form-control" id="RandomSalt" name="RandomSalt"
                    placeholder="请输入配置分组">{$RandomSalt}</textarea>
                  <small class="form-text">随机盐改变需重新生成管理token与用户token</small>
                </div>
                <div class="mb-3">
                  <label class="form-label">生成管理token</label>
                  <button type="button" class="btn btn-default" id="newToken">点此生成</button>
                </div>
                <div class="mb-3">
                  <label class="form-label">api开关</label>
                  <div class="form-check form-switch">
                    {if $ApiSwitch=="true"}
                    <input type="checkbox" class="form-check-input" id="ApiSwitch" checked="">
                    {else}
                    <input type="checkbox" class="form-check-input" id="ApiSwitch">
                    {/if}
                    <label class="form-check-label" for="ApiSwitch"></label>
                  </div>
                  <small class="form-text">api关闭后将不能访问api(除验证api)</small>
                </div>

                <div>
                  <button type="submit" class="btn btn-primary me-1">确 定</button>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>

  </div>

  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/popper.min.js"></script>
  <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/main.min.js"></script>
  <script type="text/javascript" src="/js/jquery-confirm/jquery-confirm.min.js"></script>
  <script type="text/javascript" src="/js/lyear-loading.js"></script>
  <script>
    $(function () {
      $("#newToken").on("click", function () {
        $.confirm({
          title: '生成新的token',
          content: '这将覆盖你之前生成过的token,你确认吗',
          icon: 'mdi mdi-comment-question',
          animation: 'scale',
          closeAnimation: 'scale',
          opacity: 0.5,
          buttons: {
            'confirm': {
              text: '生成',
              btnClass: 'btn-blue',
              action: function () {
                const l = $("body").lyearloading({
                  opacity: 0.1,
                  backgroundColor: '#ccc',
                  textColorClass: 'text-success',
                  spinnerColorClass: 'text-success',
                  spinnerSize: 'lg',
                  zindex: 9999,
                });
                $.ajax({
                  type: "POST",
                  url: "?action=newToken",
                  dataType: "json",
                  success: function (res) {
                    l.hide()
                    if (res.code == 200) {
                      notify("新token", res.msg, "success")
                      $.alert({
                        title: '新的token',
                        icon: 'mdi mdi-alert',
                        type: 'green',
                        content: '<span>' + res.token + '</span><hr>' + '<small>只会显示一次,请保存好</small>',
                      });
                    } else {
                      notify("新token", res.msg, "error")
                    }
                  },
                  error: function (res) {
                    l.hide()
                    notify("新token", "生成失败", "error")
                  }
                })
              }
            },
            '取消': function () {
            },
          }
        });
      })
      $("button[type='submit']").on("click", function () {
        let data = {
          SystemName: $("#SystemName").val(),
          SiteKeywords: $("#SiteKeywords").val(),
          SiteDescription: $("#SiteDescription").val(),
          icp: $("#icp").val(),
          RandomSalt: $("#RandomSalt").val(),
          ApiSwitch: $("#ApiSwitch").is(":checked")
        };
        const l = $("body").lyearloading({
          opacity: 0.1,
          backgroundColor: '#ccc',
          textColorClass: 'text-success',
          spinnerColorClass: 'text-success',
          spinnerSize: 'lg',
          zindex: 9999,
        });
        $.ajax({
          type: "POST",
          url: "?action=set",
          data: data,
          dataType: "json",
          success: function (res) {
            l.hide()
            if (res.code == 200) {
              notify("更新配置", res.msg, "success")
              setTimeout(function () {
                window.parent.location.reload()
              }, 1000)
            } else {
              notify("更新配置", res.msg, "error")
            }
          }, error: function (res) {
            l.hide()
            notify("更新配置", "网络错误", "error")
          }
        })
      })
    })
    function notify(title, message, type) {
      if (window.parent && window.parent !== window) if (typeof window.parent.notify === 'function') return window.parent.notify(title, message, type);
      if (typeof $.notify != 'function') return;
      switch (type) {
        case 'success':
          icon = "mdi mdi-check-all"
          type = 'success';
          break;
        case 'warning':
          icon = "mdi mdi-alert-circle"
          type = 'warning';
          break;
        case 'error':
          icon = "mdi mdi-close-octagon-outline"
          type = 'danger';
          break;
        default:
          icon = "mdi mdi-information-outline"
          type = 'info';
      }
      $.notify({
        icon: 'mdi mdi-alert',
        title,
        message,
        url: '',
        target: '_blank'
      }, {
        type,
        allow_dismiss: true,
        newest_on_top: true,
        placement: {
          from: 'top',
          align: 'right'
        },
        offset: {
          x: 20,
          y: 20
        },
        spacing: 10,
        z_index: 1031,
        delay: 3000,
        animate: {
          enter: 'animate__animated animate__fadeInDown',
          exit: 'animate__animated animate__fadeOutRight'
        },
      });
    }
  </script>
</body>

</html>